<template>
  <view>
    <!-- #ifdef APP-PLUS -->
    <video
      v-show="video.visible"
      :src="video.url"
      id="videoPlayer"
      @fullscreenchange="onVideoFullScreenChange"
    ></video>
    <!-- #endif -->
    <view class="tn-flex tn-flex-wrap">
      <!-- 动态 -->
      <view
        class="tn-flex blogger__box"
        v-for="(item, tieziliindex) in list"
        :key="tieziliindex"
        v-show="tieziliindex < 3"
      >
        <view
          class="blogger__item tn-bg-white"
          style="margin-bottom: 10px"
          @click="dakai(item)"
        >
          <view style="height: 334rpx">
            <!-- <img
              v-if="item.medal_list.length"
              :src="item.userAvatar"
              alt=""
              style="width: 100%; height: 100%; border-radius: 10rpx 10rpx 0 0"
            /> -->
            <img
              v-if="item.mainImage.length !== 0"
              class="blogger__main-image"
              :src="item.mainImage[0]"
              @click.stop="
                tupian(image_index, item.mainImage, item.price_is, item.id)
              "
              style="
                width: 100%;
                height: 100%;
                border-radius: 10rpx 10rpx 0 0;
                object-fit: cover;
              "
            />
          </view>
          <view style="margin: 0 8rpx">
            <p
              style="
                width: 300rpx;
                height: 28rpx;
                overflow: hidden;
                font-size: 20rpx;
                margin: 8rpx 0;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ item.content }}
            </p>
            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
              <view class="tn-flex tn-flex-col-center">
                <img
                  :src="item.userAvatar"
                  style="
                    width: 32rpx;
                    height: 32rpx;
                    border-radius: 100%;
                    margin-right: 8rpx;
                  "
                />
                <span style="font-size: 20rpx; color: #3d3d3d">{{
                  item.userName
                }}</span>
              </view>
              <view
                @click.stop="dianzantiezi(item, tieziliindex)"
                class="tn-flex tn-flex-col-center"
                style="font-size: 16rpx"
              >
                <image
                  :src="`../../../static/other/${
                    item.is_like ? 'zan-1' : 'zan'
                  }.png`"
                  style="width: 24rpx; height: 24rpx; margin-right: 8rpx"
                ></image>
                {{
                  $t.number.formatNumberAddPriceUnit(item.likeCount) || "点赞"
                }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 热门话题 -->

      <view class="huati">
        <view class="tn-plan-content" style="padding: 20rpx">
          <view
            class="tn-flex tn-flex-row-between tn-flex-col-center"
            style="margin-bottom: 32rpx"
          >
            <view class="tn-flex tn-flex-col-center">
              <img
                src="../../static/other/huatiIcon.png"
                alt=""
                style="width: 32rpx; height: 32rpx; margin-right: 10rpx"
              />
              <span class="huatititle">热门话题</span>
            </view>
            <view style="color: rgba(255, 255, 255, 0.5); font-size: 20rpx"
                   @click="
              navigateToFn({
                url: `/circleMixinPages/tags_more`,
                checkLogin: false,
              })
            "
              >更多<text class="tn-icon-right" style="margin-left: 4rpx"></text
            ></view>
          </view>
          <view
            class="tn-flex tn-flex-col-center huatiList"
            v-for="(item, indexhuati) in tags.slice(0, 4)"
            :key="indexhuati"
            @click="
              navigateToFn({
                url: `/circleMixinPages/tags_list?id=${item.id}`,
                checkLogin: false,
              })
            "
          >
            <view
              style="
                width: 60rpx;
                height: 60rpx;
                border-radius: 10rpx;
                background: #fff;
              "
            ></view>
            <!-- <img style="width: 60rpx; height:60rpx; border-radius: 10rpx;" :src="item.image" alt=""> -->
            <view
              class="tn-flex tn-flex-direction-column tn-flex-center huati-item"
              style="margin-left: 16rpx"
            >
              <view class="tn-flex tn-flex-col-center">
                <p class="text">#{{ item.title }}</p>
                <img
                  v-if="indexhuati <= 1"
                  style="width: 24rpx; height: 24rpx; margin-left: 18rpx"
                  src="../../static/other/hotIcon.png"
                  alt=""
                />
              </view>
              <text
                style="
                  font-size: 20rpx;
                  color: rgba(255, 255, 255, 0.5);
                  margin-top: 4rpx;
                "
                >200W热度</text
              >
            </view>
          </view>
        </view>
      </view>
      <view
        class="tn-flex blogger__box"
        v-for="(Listitem, Listtieziliindex) in list"
        :key="Listitem.id"
        v-show="Listtieziliindex >= 3 && list.length > 3"
      >
        <view
          class="blogger__item tn-bg-white"
          style="margin-bottom: 10px"
          @click="dakai(Listitem)"
        >
          <view style="height: 334rpx">
            <!-- <img
              v-if="Listitem.medal_list.length"
              :src="Listitem.userAvatar"
              alt=""
              style="width: 100%; height: 100%; border-radius: 10rpx 10rpx 0 0"
            /> -->
            <img
              v-if="Listitem.mainImage.length !== 0"
              class="blogger__main-image"
              :src="Listitem.mainImage[0]"
              @click.stop="
                tupian(
                  image_index,
                  Listitem.mainImage,
                  Listitem.price_is,
                  Listitem.id
                )
              "
              style="
                width: 100%;
                height: 100%;
                border-radius: 10rpx 10rpx 0 0;
                object-fit: cover;
              "
            />
          </view>
          <view style="margin: 0 8rpx">
            <p
              style="
                width: 300rpx;
                height: 28rpx;
                overflow: hidden;
                font-size: 20rpx;
                margin: 8rpx 0;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ Listitem.content }}
            </p>
            <view class="tn-flex tn-flex-col-center tn-flex-row-between">
              <view class="tn-flex tn-flex-col-center">
                <img
                  :src="Listitem.userAvatar"
                  style="
                    width: 32rpx;
                    height: 32rpx;
                    border-radius: 100%;
                    margin-right: 8rpx;
                  "
                />
                <span style="font-size: 20rpx; color: #3d3d3d">{{
                  Listitem.userName
                }}</span>
              </view>
              <view
                @click.stop="dianzantiezi(Listitem, Listtieziliindex)"
                class="tn-flex tn-flex-col-center"
                style="font-size: 16rpx"
              >
                <image
                  :src="`../../../static/other/${
                    Listitem.is_like ? 'zan-1' : 'zan'
                  }.png`"
                  style="width: 24rpx; height: 24rpx; margin-right: 8rpx"
                ></image>
                {{
                  $t.number.formatNumberAddPriceUnit(Listitem.likeCount) ||
                  "点赞"
                }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 热门话题 -->
      <!-- <view>
        <view class="tn-plan-content tn-margin">
          <view
            v-for="(item, indexhuati) in tags"
            :key="indexhuati"
            class="tn-main-gradient-aquablue--light tn-plan-content__item tn-margin-right tn-round tn-text-sm tn-text-bold"
            @click="
              navigateToFn({
                url: '/circleMixinPages/tags_list?id=' + item.id,
                checkLogin: false,
              })
            "
          >
            <text class="tn-plan-content__item--prefix">#</text>
            {{ item.title }}
          </view>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
const audioContext = uni.createInnerAudioContext();
export default {
  props: ["list", "index", "tags"],
  created() {
    uni.$on("onlist_change", (data) => {
      this.ondianzan(data);
    });
  },
  data() {
    return {
      video: {
        visible: false,
        url: "",
        context: null,
      },
      noClick: true,
      videoPlay: false,
      isplay: false,
      isLike: false,
      //	body: this.item.content.replace(/<br>/g, "\n").replace(/<p>/g, "").replace(/<\/p>/g, "\n")
    };
  },
  created() {
    this.video.context = uni.createVideoContext("videoPlayer");
  },

  methods: {
    async ondianzan(data) {
      for (let i in this.list) {
        if (this.list[i].id == data.id) {
          if (data.is_like == true) {
            this.list[i].is_like = true;
            this.list[i].likeCount++;
            const xinzeng = {
              src: this.$store.state.userInfo.userInfoAvatar,
            };
            this.list[i].viewUser.latestUserAvatar.push(xinzeng);
          } else {
            this.list[i].is_like = false;
            this.list[i].likeCount--;
            let listuser = this.list[i].viewUser.latestUserAvatar;
            for (let ddd in listuser) {
              if (
                listuser[ddd].src == this.$store.state.userInfo.userInfoAvatar
              ) {
                listuser.splice(ddd, 1);
              }
            }
          }
        }
      }
    },

    screenChange(e) {
      let _this = this;
      let fullScreen = e.detail.fullScreen;
      if (!fullScreen) {
        //_this.videoContext.pause();
        //_this.videoPlay = false;
      }
    },
    videoShow(vod) {
      uni.navigateTo({
        url: "/homeMixinPages/vodplay?vodurl=" + vod,
      });
    },
    tupian(i, tulist, price, id) {
      if (price > 0) {
        uni.navigateTo({
          url: "/circleMixinPages/details?id=" + id,
        });
      } else {
        uni.previewImage({
          current: i,
          urls: tulist,
        });
      }
    },
    dakai(item) {
      for (let i in this.list) {
        this.list[i].isplay = false;
      }
      audioContext.stop();

      uni.navigateTo({
        url: "/circleMixinPages/details?id=" + item.id,
      });
    },

    shipin(vod) {
      this.videoPlay = true;
      //this.$emit('bofang', vod)
    },

    chaozuo(item, tieziliindex, ziji) {
      let that = this;
      if (!uni.getStorageSync("token")) {
        that.msg("请登陆");
      }
      let list = [];
      if (item.ziji == 1 && uni.getStorageSync("token") && item.manage == 0) {
        list = ["删除帖子", "刷新帖子"];
      }
      if (item.manage == 1) {
        list = ["删除帖子", "推荐贴子", "置顶帖子", "刷新帖子"];
      }
      uni.showActionSheet({
        itemList: list,
        success: function (res) {
          if (list[res.tapIndex] == "删除帖子") {
            that.list.splice(tieziliindex, 1);
            that.edieGoods(item.id, 1);
          }
          if (list[res.tapIndex] == "推荐贴子") {
            that.edieGoods(item.id, 2);
          }

          if (list[res.tapIndex] == "置顶帖子") {
            that.edieGoods(item.id, 3);
          }
          if (list[res.tapIndex] == "刷新帖子") {
            that.edieGoods(item.id, 4, ziji);
          }
        },
        fail: function (res) {
          console.log(res.errMsg);
        },
      });
    },

    async edieGoods(id, type, ziji = 0) {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/user/edieGoods",
        data: {
          id: id,
          type: type,
          ziji: ziji,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.msg(result.data.msg);
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    selectAddressFn(body) {
      if (body.lng) {
        uni.openLocation({
          longitude: Number(body.lng),
          latitude: Number(body.lat),
          name: "发布位置",
          address: body.address,
        });
      } else {
        this.msg("未标注地图");
      }
    },

    dianzantiezi(item, index) {
      let that = this;
      if (that.noClick) {
        // 第一次点击
        that.noClick = false;
        console.log("点击", that.noClick);
        that.dianzantiezi_pass(item, index);
        setTimeout(() => {
          that.noClick = true;
        }, 2000);
      } else {
        this.msg("操作太频繁");
        // 这里是重复点击的判断
      }
    },

    tiezi() {
      console.log(333);
    },

    async dianzantiezi_pass(item, index) {
      if (!this.isLogin) {
        this.loginBoxFlag = true;
        return false;
      }

      if (this.list[index].is_like == false) {
        this.list[index].is_like = true;
        this.list[index].likeCount++;
        const xinzeng = {
          src: this.$store.state.userInfo.userInfoAvatar,
        };
        this.list[index].viewUser.latestUserAvatar.push(xinzeng);
      } else {
        this.list[index].is_like = false;
        if (this.list[index].likeCount > 0) {
          this.list[index].likeCount--;
        }
        let listuser = this.list[index].viewUser.latestUserAvatar;
        for (let ddd in listuser) {
          if (listuser[ddd].src == this.$store.state.userInfo.userInfoAvatar) {
            listuser.splice(ddd, 1);
          }
        }
      }

      let result = await this.flowgoods(item.id);
    },

    bofang(vocurl, index) {
      if (this.list[index].isplay) {
        audioContext.stop();
        this.list[index].isplay = false;
        return;
      }

      for (let i in this.list) {
        this.list[i].isplay = false;
      }

      this.list[index].isplay = !this.list[index].isplay;

      let that = this;
      audioContext.src = vocurl;
      audioContext.play();
      audioContext.onPlay(() => {});
      audioContext.onEnded(() => {
        this.list[index].isplay = false;
      });
      audioContext.onError(() => {
        this.list[index].isplay = false;
        that.msg("不支持播放该音频格式");
      });
    },

    playVideo(url) {
      this.video.visible = true;
      this.video.url = url;
      this.$nextTick(() => {
        this.video.context.requestFullScreen({
          direction: 0,
        });
        this.video.context.play();
      });
    },
    onVideoFullScreenChange(e) {
      //当退出全屏播放时，隐藏播放器
      if (this.video.visible && !e.detail.fullScreen) {
        this.video.visible = false;
        this.video.context.stop();
      }
    },
  },
};
</script>


<style scoped lang="scss">
.xunzhang {
  width: 20px;
}

.blogger__desc__label--prefix {
  color: #00ffc8;
  padding-right: 5px;
}

.blogger__desc__label {
  height: 24px;
  padding: 4px 6px;
  margin: 5px 9px 0 0;
}

.blogger__box {
  width: calc(50% - 40rpx);
  height: 420rpx;
  overflow: hidden;
  margin: 0 20rpx;
  margin-bottom: 40rpx;
}

.blogger__item {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.blogger__main-image--2 {
  max-width: 45%;
  max-height: 130px;
}

.blogger__main-image--3 {
  height: 106px;
  width: 100%;
}

.blogger__main-image {
  border-radius: 8px;
}

.fufei {
  -webkit-filter: blur(2px);
  /*像素值越大，越模糊*/
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(3px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false);
}

.blogger__main-image--1 {
  max-width: 100%;
  max-height: 150px;
}
.huati {
  flex: 1;
  max-width: 316rpx;
  height: 420rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  margin: 0 20rpx;
  /* 暗色调渐变3 */
  border: 1px solid transparent;
  background-image: linear-gradient(#372e77, #372e77),
    // 跟背景色保持一致，根据实际情况修改
    linear-gradient(
        135deg,
        rgba(194, 54, 253, 1),
        rgba(97, 70, 255, 1),
        rgba(67, 169, 241, 1)
      );
  background-origin: border-box;
  background-clip: content-box, border-box;
  .huatititle {
    font-style: italic;
    font-size: 28rpx;
    font-weight: 900;
    font-variation-settings: "opsz" auto;
    background: linear-gradient(180deg, #fa5151 0%, #ffc300 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  .huatiList {
    height: 60rpx;
    margin-bottom: 20rpx;
    &:last-child {
      margin-bottom: 0;
    }
    .huati-item {
      ::v-deep p {
        max-width: 160rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
